
<template>
	<view >		
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText"></block>
				<block slot="content"></block>
				<block slot="right" >
					<span @click="nextRead">NEXT</span>					
				</block>	
			</cu-custom>
			<!-- list列表 -->
			<view class="cu-list menu" v-if="readData.cusName">
				<uni-card :title="readData.cusName" thumbnail="/static/icon/user.png"
					:extra="readData.cusCode" :note="'地址：'+readData.address">
					手机号码：{{readData.mobile}}
				</uni-card>
			</view>
			 <view style="padding: 0 14px 0  14px;">
				
				<!--
			<view class="cu-list menu" >
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">用户编号</text>
					</view>
					<view class="action">
						<text class="text-blue">{{readData.cusCode}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">用户姓名</text>
					</view>
					<view class="action">
						<text class="text-blue">{{readData.cusName}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">用户地址</text>
					</view>
					<view class="action">
						<view class="text-blue" style="font-size: 32upx;">{{ readData.address}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">手机号码</text>
					</view>
					<view class="action">
						<view class="text-blue" style="font-size: 32upx;">{{ readData.mobile}}</view>
					</view>
				</view>				
			</view>	 -->
			<view class="cu-list menu">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="text-grey">上次读数</text>
					</view>
					<view class="action">
						<text class="text-blue">{{readData.beginScale}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">水表状态</text>
					</view>
					<view class="action">
						<app-select label="" class="text-blue" style="text-align: right;" v-model="readData.waterUsedType" :dict="wutOptions" space ></app-select>										
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">抄表日期</text>
					</view>
					<view class="action">
						<text class="text-blue">{{readData.readTime .substr(0,10)}}</text>
					</view>
				</view>
			</view>
			
			<view class="cu-list menu" >
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<view class="content">
						<text class="text-grey">本月读数</text>
					</view>					
				
					<view class="action">
						<input 	name="type" hidden v-model="readData.bookId"></input>
						<input 	name="type" hidden v-model="readData.customerId"></input>
						<input class="text-red" style="height: 60px;font-size: 20px;text-align: right;" 
							placeholder="请输入本月读数" name="input" @blur="realAmount" v-model="readData.endScale"></input>				
					</view>
				</view>	
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<view class="content">
						<text class="text-grey">水量</text>
					</view>	
					<view class="action">
						<input class="text-red" style="height: 60px;font-size: 20px;text-align: right;" 
							name="input" v-model="readData.amount" @blur="realAmount"></input>						
					</view>	
				</view>	
			</view>	
		</view>
		<view class="padding flex flex-direction" >
			<button class="cu-btn bg-green lg"  @click="onEnterRead">抄表提交</button>
		</view>

		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import util from './util.js'
	import appSelect from '@/components/my-componets/appSelect.vue'
	const wutOptions = [{text:'正常',value:'1'},{text:'报修',value:'2'},{text:'换表',value:'3'},{text:'翻表',value:'4'},{text:'违章',value:'5'}];

	export default {
		components:{
			appSelect
		 },
		data() {
			return {
				toggleStatus: false,				
				loading: false,
				wutOptions,
				readData:{
					cusCode: '',
					cusName: '',
					address: '',
					mobile: '',
					beginScale: 0,
					waterUsedType: '',
					readTime: '',
					bookId: '',
					customerId: '',
					endScale: null,
					amount: null
				},
				currentIndex: 0,
				readParams:{},
				dataSource:[],
				url:{
					getData: '/mr/mrBookMeters/queryBookMaterById',
					setManualData: '/mr/mrRecords/readManual',
					delManualData: '/mr/mrRecords/readDelManual'
				}
			};
		},
		onLoad() {
			// this.selectedIndexs = []
			// this.getData(1)				
		},
		created(){
			console.log("this.$Route.query",this.$Route.query);
			this.readParams=this.$Route.query;
			this.loadinfo();
		},
		methods: {
			nextRead(){
				this.currentIndex++;
				console.log("this.readParams.meters",this.readParams.meters);
				if(this.currentIndex < this.readParams.meters){
					this.readData=this.dataSource[this.currentIndex];
				}else{
					this.$tip.success('已是最后!')
				}				
			},
			realAmount(){
				let es=this.readData.endScale;
				if( es == undefined ||  es == '' ){
					es=0;
				}				 
				if(this.readData.waterUsedType === '1'){
					//正常					
					let a= es - this.readData.beginScale;
					if(a>0){
						this.readData.amount=a;
					}else{
						this.readData.amount='';
					}					
				}else{
					//非正常
				}
			},			
			loadinfo(){
				if(this.readParams.bookId){
					this.$http.get(this.url.getData, {params:{id:this.readParams.bookId}} ).then(res=> {
					  if (res.data.success) {						  
						// 将查询的数据赋值给 dataSource               
						this.dataSource = res.data.result;
						if(this.dataSource && this.dataSource.length>0){
							this.readData=this.dataSource[this.currentIndex];
						}
					  } else {
						this.$error({title: '加载失败', content: res.message})
					  }
					}).catch(e=>{
						console.log("请求错误",e)
					})
				}
			},
			onEnterRead(){				
				let es=this.readData.endScale;
				if(this.readData.waterUsedType === '1'){
					if( es == undefined ||  es == '' ){
						es=0;
					}
					
					if(es === 0){
						//删除
						let param= {
							customerId: this.readData.customerId,
							beginScale: this.readData.beginScale,
							endScale: this.readData.endScale,
							waterUsedType: this.readData.waterUsedType,
							amount: this.readData.amount,
							readTime: this.readData.readTime,
							cusName: this.readData.cusName,
							bookId: this.readData.bookId,
							waterReadInput: '2'
						}
						this.$http.post(this.url.delManualData, param ).then(res=> {
						  if (res.data.success) {
							// 将查询的数据赋值给 dataSource               
							this.$tip.success('删除成功!')
							util.$emit('readDel',this.readData.bookId)
						  } else {
							this.$error({title: '加载失败', content: res.message})
						  }
						}).catch(e=>{
							console.log("请求错误",e)
						})						
					} else{
						//抄表
						this.$http.post(this.url.setManualData, { 
							customerId: this.readData.customerId,
							beginScale: this.readData.beginScale,
							endScale: this.readData.endScale,
							waterUsedType: this.readData.waterUsedType,
							amount: this.readData.amount,
							readTime: this.readData.readTime,
							cusName: this.readData.cusName,
							bookId: this.readData.bookId,
							waterReadInput: '2'}).then(res=> {
						  if (res.data.success) {
							// 将查询的数据赋值给 dataSource  
							this.$tip.success('抄表成功!')
							// this.$parent.fatherMethod();
							util.$emit('readAdd',this.readData.bookId)
							this.nextRead();
						  } else {
							this.$error({title: '加载失败', content: res.message})
						  }
						}).catch(e=>{
							console.log("请求错误",e)
						})
					}
				}
			}
		},		
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.uni-group {
		display: flex;
		align-items: center;
	}
	.padding0{
		padding: 0px;
	}
	.padding{
		padding: 15px;
	}
</style>
